<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta content="user-scalable=no,width=device-width, initial-scale=1" id="viewport" name="viewport" initial-scale="1">

		<script language="javascript" type="text/javascript" src="../js/js/baseJs.js"></script>

	</head>
	<body style="background:#fff">

		<div class="wap-upload-pay-info" id="uploadPayInfo" style="display: none;">
			<div class="wap-header">申请业务
				<a class="back" onClick="javascript:window.history.back();return false;"></a>
			</div>
			<!-- projectId 8 是中石油业务 -->
			<div class="select-type" v-if="!isShowApplyByPeople&&!isShowPayApply&&projectId!==8">
				<div class="service-people" @click="isShowApplyByPeople=true">上门安装</div>
				<div class="service-self" @click="isShowPayApply=true">快递安装</div>
				<div style="text-align: center;color: #333333;">上门安装目前只支持宁波地区，其他地区请选择快递安装</div>
			</div>
			<div class="pay-info-bd" v-if="isShowApplyByPeople">
				<div class="upload-bd" style="margin-top:1.6rem">
					<div class="l-group">
						<div class="name">手机号：</div>
						<input placeholder="输入手机号" v-model="telephone" oninput="if(value.length>11)value=value.slice(0,11)" type="number">
					</div>
					<div class="l-group">
						<div class="name">收货地址：</div>
						<textarea placeholder="请输入您的收货地址" v-model="address"></textarea>
					</div>
				</div>
				<div class="wap-comfirm-button" @click="applyProjectItemByPeople()">申请上门安装</div>
			</div>
			<div class="pay-info-bd" v-if="isShowPayApply&&projectId!==8">
				<div class="qr-bd">
					<div class="zfb-c">
						<div class="pic"><img src="../image/zfb_pay.png"></div>
						<div class="text">
							<div class="name">abchjf@163.com
								<div style="color:#999999;font-size:.24rem">扫码或长按请复制</div>
							</div>
						</div>
					</div>

					<div class="wx-c">
						<div class="pic"><img src="../image/wx_pay.png"></div>
						<div class="text">
							<div class="name">ferris1986
								<div style="color:#999999;font-size:.24rem">扫码或长按请复制</div>
							</div>
						</div>
					</div>
				</div>

				<div class="line"></div>
				<div class="select-bd">
					<div class="zfb-c" @click="isSelectedZ=true,payType=1">
						<span :class="{on:isSelectedZ}"></span>
						<div class="text">
							<div>支付宝支付</div>
							<div class="sm">推荐支付宝最新版本</div>
						</div>
					</div>
					<div class="wx-c" @click="isSelectedZ=false,payType=2">
						<span :class="{on:!isSelectedZ}"></span>
						<div class="text">
							<div>微信支付</div>
							<div class="sm">推荐微信最新版本</div>
						</div>
					</div>
				</div>
	
				<div style="display:flex;flex-direction:row">
					<div style="font-size:.28rem;margin: 0 .2rem 0 .6rem;align-items: center;display: flex;min-width: 1.5rem;">银行卡正面</div>
					<div class="upload-wrap">
					    <div class="box" v-if="firstImgTempList.length==0">
					        <label class="p dotted">
					            <input type="file" accept="image/*" name="file"
					                   @change="onChooseImage($event,1)">
					            <img src="../image/add_ico.png" alt="">
					        </label>
					    </div>
					    <template v-for="(imgIndex,imgItem) in firstImgTempList">
					        <div class="box">
					            <div class="image-c">
					                <img :src="imgItem">
					                <div class="delete" @click.stop="deleteImg(imgIndex,firstImgTempList)">
					                    <img src="../image/close_ico.png" alt="">
					                </div>
					            </div>
					        </div>
					    </template>
					</div>
				</div>
				<div style="display:flex;flex-direction:row">
					<div style="font-size:.28rem;margin: 0 .2rem 0 .6rem;align-items: center;display: flex;min-width: 1.5rem;">银行卡反面</div>
					<div class="upload-wrap">
					    <div class="box" v-if="secondImgTempList.length==0">
					        <label class="p dotted">
					            <input type="file" accept="image/*" name="file"
					                   @change="onChooseImage($event,2)">
					            <img src="../image/add_ico.png" alt="">
					        </label>
					    </div>
					    <template v-for="(imgIndex,imgItem) in secondImgTempList">
					        <div class="box">
					            <div class="image-c">
					                <img :src="imgItem">
					                <div class="delete" @click.stop="deleteImg(imgIndex,secondImgTempList)">
					                    <img src="../image/close_ico.png" alt="">
					                </div>
					            </div>
					        </div>
					    </template>
					</div>
				</div>
				<div style="display:flex;flex-direction:row">
					<div style="font-size:.28rem;margin: 0 .2rem 0 .6rem;align-items: center;display: flex;min-width: 1.5rem;">身份证正面</div>
					<div class="upload-wrap">
					    <div class="box" v-if="thirdImgTempList.length==0">
					        <label class="p dotted">
					            <input type="file" accept="image/*" name="file"
					                   @change="onChooseImage($event,3)">
					            <img src="../image/add_ico.png" alt="">
					        </label>
					    </div>
					    <template v-for="(imgIndex,imgItem) in thirdImgTempList">
					        <div class="box">
					            <div class="image-c">
					                <img :src="imgItem">
					                <div class="delete" @click.stop="deleteImg(imgIndex,thirdImgTempList)">
					                    <img src="../image/close_ico.png" alt="">
					                </div>
					            </div>
					        </div>
					    </template>
					</div>
				</div>
				<div style="display:flex;flex-direction:row">
					<div style="font-size:.28rem;margin: 0 .2rem 0 .6rem;align-items: center;display: flex;min-width: 1.5rem;">身份证反面</div>
					<div class="upload-wrap">
					    <div class="box" v-if="fourImgTempList.length==0">
					        <label class="p dotted">
					            <input type="file" accept="image/*" name="file"
					                   @change="onChooseImage($event,4)">
					            <img src="../image/add_ico.png" alt="">
					        </label>
					    </div>
					    <template v-for="(imgIndex,imgItem) in fourImgTempList">
					        <div class="box">
					            <div class="image-c">
					                <img :src="imgItem">
					                <div class="delete" @click.stop="deleteImg(imgIndex,fourImgTempList)">
					                    <img src="../image/close_ico.png" alt="">
					                </div>
					            </div>
					        </div>
					    </template>
					</div>
				</div>
				<div style="display:flex;flex-direction:row">
					<div style="font-size:.28rem;margin: 0 .2rem 0 .6rem;align-items: center;display: flex;min-width: 1.5rem;">手持身份证</div>
					<div class="upload-wrap">
					    <div class="box" v-if="fiveImgTempList.length==0">
					        <label class="p dotted">
					            <input type="file" accept="image/*" name="file"
					                   @change="onChooseImage($event,5)">
					            <img src="../image/add_ico.png" alt="">
					        </label>
					    </div>
					    <template v-for="(imgIndex,imgItem) in fiveImgTempList">
					        <div class="box">
					            <div class="image-c">
					                <img :src="imgItem">
					                <div class="delete" @click.stop="deleteImg(imgIndex,fiveImgTempList)">
					                    <img src="../image/close_ico.png" alt="">
					                </div>
					            </div>
					        </div>
					    </template>
					</div>
				</div>
				<div class="upload-bd">
					<div class="l-group">
						<div class="name">开户行名称：</div>
						<input placeholder="请输入银行卡开户行" v-model="bankName" />
					</div>
					<div class="l-group" v-if="isSelectedZ">
						<div class="name">支付宝姓名：</div>
						<input placeholder="请输入您的支付的支付宝名" v-model="payAccount">
					</div>
					
					<div class="l-group" v-if="!isSelectedZ">
						<div class="name">微信姓名：</div>
						<input placeholder="请输入您支付的微信名" v-model="payAccount">
					</div>
					<div class="info">(!微信转账填微信名，支付宝转账填支付宝名,这将作为平台审核的重要凭证,有问题请联系平台：电话18358597222)</div>
					<div class="l-group">
						<div class="name">手机号：</div>
						<input placeholder="输入手机号" v-model="telephone" oninput="if(value.length>11)value=value.slice(0,11)" type="number">
					</div>
					<div class="l-group">
						<div class="name">收货地址：</div>
						<textarea placeholder="请输入您的收货地址" v-model="address"></textarea>
					</div>
				</div>
				<div class="wap-comfirm-button" @click="applyProjectItem()">已付定金</div>
			</div>

			<!-- 油卡 -->
			<div class="select-type" v-if="projectId==8&&isShowOilMoney">
				<div class="service-people" @click="oilMoney=1000,isShowOilMoney=false">油卡1000元</div>
				<div class="service-self" @click="oilMoney=3000,isShowOilMoney=false">油卡3000元</div>
				<div class="service-self" @click="oilMoney=5000,isShowOilMoney=false">油卡5000元</div>
				<div class="service-self" @click="oilMoney=10000,isShowOilMoney=false">油卡10000元</div>
				<div style="text-align: center;color: #333333;">请选择要充值的面额</div>
			</div>
			<div class="pay-info-bd" v-if="projectId==8&&!isShowOilMoney">
				<div class="qr-bd" style="margin-left:25%">
					<div class="zfb-c">
						<div class="pic"><img src="../image/zfb_pay.png"></div>
						<div class="text">
							<div class="name">abchjf@163.com
								<div style="color:#999999;font-size:.24rem">扫码或长按请复制</div>
							</div>
						</div>
					</div>

					<!-- <div class="wx-c">
          <div class="pic"><img src="../image/wx_pay.png"></div>
          <div class="text">
            <div class="name">ferris1986 
              <div style="color:#999999;font-size:.24rem">扫码或长按请复制</div>
            </div>
          </div>
        </div>   -->
				</div>

				<div class="line"></div>
				<!-- <div class="select-bd" > 
        <div class="zfb-c" @click="isSelectedZ=true,payType=1"> 
          <span :class="{on:isSelectedZ}"></span>
          <div class="text">
            <div>支付宝支付</div>
            <div class="sm">推荐支付宝最新版本</div>
          </div>
        </div>
        <div class="wx-c" @click="isSelectedZ=false,payType=2"> 
          <span :class="{on:!isSelectedZ}"></span>
          <div class="text">
            <div>微信支付</div>
            <div class="sm">推荐微信最新版本</div>
          </div>
        </div>
      </div> -->
				<div class="upload-bd">
					<div class="l-group">
						<div class="name">支付宝姓名：</div>
						<input placeholder="请输入您的支付的支付宝名" v-model="payAccount">
					</div>
					<!-- <div class="l-group" v-if="!isSelectedZ"> 
          <div class="name">微信姓名：</div>
          <input placeholder="请输入您支付的微信名" v-model="payAccount">
        </div> -->
					<div class="info">(!支付宝转账填支付宝名,这将作为平台审核的重要凭证,有问题请联系平台：电话18358597222)</div>
					<div class="l-group">
						<div class="name">手机号：</div>
						<input placeholder="输入手机号" v-model="telephone" oninput="if(value.length>11)value=value.slice(0,11)" type="number">
					</div>
					<div class="l-group">
						<div class="name">油卡账号：</div>
						<input placeholder="输入油卡账号" v-model="oilAccount">
					</div>
					<div class="l-group">
						<div class="name">油卡姓名：</div>
						<input placeholder="输入油卡姓名" v-model="oilAccountName">
					</div>
				</div>
				<div class="wap-comfirm-button" @click="applyOilProjectItem()">已付定金</div>

			</div>
			<!--  压缩图片用的  -->
			<canvas id="compressCanvas" style="position: fixed; z-index: -1; opacity: 0; top: -100%; left: -100%"></canvas>
		</div>
		<script src="../js/js/rem_fix.js"></script>
		<script src="../js/js/common.js"></script>
		<script type="text/javascript">
			var token = getCookie("userToken");
			var userId = getCookie("userId");
			console.log(token)
			console.log(userId)
			var projectId = parseInt(window.location.hash.split("#")[1]);
			var loginUrl = "../userBundle/login.mobile.html" + "?" + "../userBundle/uploadPayInfo.mobile.html" + "#" + projectId;
			console.log(loginUrl)
			if (!token || !userId) {
				window.location.href = loginUrl;
			}
			var uploadPayInfoApp = new Vue({
				el: '#uploadPayInfo',
				data: {
					isSelectedZ: true,
					payAccount: '',
					payType: 1,
					projectItems: '',
					telephone: '',
					address: '',
					isApplyProjectItem: false,
					isApplyProjectItemByPeople: false,
					isApplyOilProjectItem: false,
					isShowPayApply: false,
					isShowApplyByPeople: false,
					projectId: projectId,
					oilAccount: '',
					oilAccountName: '',
					isShowOilMoney: true,
					oilMoney: '',
					
					firstImgTempList: [], // 银行卡正面  图片临时路径列表
					firstImgUrlList:[],//银行卡正面 存放七牛返回地址列表
					secondImgTempList: [], // 银行反面  图片临时路径列表
					secondImgUrlList:[],//银行卡反面 存放七牛返回地址列表
					thirdImgTempList: [], // 身份证正面  图片临时路径列表
					thirdImgUrlList:[],//身份证正面 存放七牛返回地址列表
					fourImgTempList: [], // 身份证反面  图片临时路径列表
					fourImgUrlList:[],//身份证反面 存放七牛返回地址列表
					fiveImgTempList: [], // 身份证反面  图片临时路径列表
					fiveImgUrlList:[],//身份证反面 存放七牛返回地址列表
					isUploading: false, //是否正在上传
					
					qiniuData: {
					  key: "",
					  token: ""
					},
					upload_qiniu_addr:'',
				},
				ready: function() {
					$("#uploadPayInfo").show();
					var url = "/project/getProjectItems ";
					var data = {
						id: projectId
					}
					pushData(url, data, function(res) {
						console.log(res)
						if (res.state) {
							this.projectItems = res.data.projectItems;
						} else if (res.errorCode == 008) {
							window.location.href = url;
						} else {
							alert(res.message)
						}
					}.bind(this))
					var qiNiuData={
					    client: 1,
					    token: token,
					    userId: userId
					}
					pushData("/qiniu/get_token ",qiNiuData,function(res){
					  if(res.state){
					    this.qiniuData.token=res.data.result;
					    console.log(res)
					  }else if (res.errorCode == 008) {
						window.location.href = loginUrl;
					  }else{
					    alert(res.message)
					  } 
					}.bind(this));
					pushData("/qiniu/get_image_rul",qiNiuData,function(res){
					  if(res.state){
					    this.upload_qiniu_addr=res.data.url;
					    console.log(res)
					  }else if (res.errorCode == 008) {
								window.location.href = loginUrl;
						}else{
					    alert(res.message)
					  } 
					}.bind(this));

				},

				methods: {
					applyProjectItem: function() {
						if(this.firstImgUrlList.length==0){
							alert("请上传银行卡正面")
							return
						}
						if(this.secondImgUrlList.length==0){
							alert("请上传银行卡反面")
							return
						}
						if(this.thirdImgUrlList.length==0){
							alert("请上传身份证正面")
							return
						}
						if(this.fourImgUrlList.length==0){
							alert("请上传身份证反面")
							return
						}
						if(this.fiveImgUrlList.length==0){
							alert("请上传身份证反面")
							return
						}
						if (this.isApplyProjectItem) {
							return;
						}
						if (!this.payAccount) {
							alert("支付账户必填");
							return;
						}
						if (!this.telephone) {
							alert("手机号必填");
							return;
						}
						this.isApplyProjectItem = true;
						var url = "/project/applyProjectItem";
						var data = {
							address: this.address,
							client: 1,
							doc: "",
							bankCardNegative:this.firstImgUrlList[0],
							bankCardPositive:this.secondImgUrlList[0],
							bankName:'',
							idNegative:this.thirdImgUrlList[0],
							idPositive:this.fourImgUrlList[0],
							personIdImage:this.fiveImgUrlList[0],
							payAccount: this.payAccount,
							payType: this.payType,
							projectId: projectId,
							projectItemId: this.projectItems[0].id,
							telephone: this.telephone,
							token: token,
							userId: userId
						};
						pushData(url, data, function(res) {
							if (res.state) {
								alert("申请成功，我们将审核并安排发货");
								window.location.href = "/"
							} else if (res.errorCode == 008) {
								window.location.href = loginUrl;
							} else {
								alert(res.message);
							}
						}.bind(this));
					},
					applyOilProjectItem: function() {
						if (this.isApplyOilProjectItem) {
							return;
						}
						if (!this.payAccount) {
							alert("支付账户必填");
							return;
						}
						if (!this.telephone) {
							alert("手机号必填");
							return;
						}
						if (!this.oilAccount || !this.oilAccountName) {
							alert("油卡账号和油卡归属姓名必填");
							return;
						}
						this.isApplyOilProjectItem = true;
						var url = "/project/applyProjectItem";
						var memoContent = "油卡账号:" + this.oilAccount + "," + "油卡姓名:" + this.oilAccountName + ',' + '充值金额:' + this.oilMoney;
						console.log(memoContent)
						var data = {
							address: "",
							client: 1,
							doc: memoContent,
							payAccount: this.payAccount,
							payType: 1,
							projectId: projectId,
							projectItemId: this.projectItems[0].id,
							telephone: this.telephone,
							token: token,
							userId: userId
						};
						pushData(url, data, function(res) {
							if (res.state) {
								alert("申请成功，我们将马上为亲充值");
								this.isApplyOilProjectItem = false;
								window.location.href = "/"
							} else if (res.errorCode == 008) {
								window.location.href = loginUrl;
							} else {
								alert(res.message);
							}
						}.bind(this));
					},
					applyProjectItemByPeople: function() {
						
						if (this.isApplyProjectItemByPeople) {
							return;
						}
						if (!this.telephone || !this.address) {
							alert("手机号和地址必填");
							return;
						}
						this.isApplyProjectItemByPeople = true;
						var url = "/project/applyProjectItem";
						var data = {
							address: this.address,
							client: 1,
							doc: "该用户是上门安装",
							payAccount: null,
							payType: null,
							projectId: projectId,
							projectItemId: this.projectItems[0].id,
							telephone: this.telephone,
							token: token,
							userId: userId
						};
						pushData(url, data, function(res) {
							if (res.state) {
								alert("申请成功，我们将为您上门服务");
								window.location.href = "/"
							} else if (res.errorCode == 008) {
								window.location.href = loginUrl;
							} else {
								alert(res.message);
							}
						}.bind(this));
					},
					//选择图片
					     onChooseImage: function (event,type) {
					         var that = this;
					         //判断图片数量是否已上限
							 
					         var currentImgTempArray = [];
					         if (currentImgTempArray.length >= 5) {
					             alert("最多上传5张图片");
					             return false;
					         }
					
					         //使用FileReader对文件对象进行操作
					         var reader = new FileReader();
					         reader.readAsDataURL(event.target.files[0]); //将读取到的文件编码成Data URL
					         console.log(event.target.files[0])
					
					         reader.onload = function () { //读取完成时
					             var replaceSrc = reader.result; //文件输出的内容
					             //console.log(reader)
					             //压缩图片处理
					             var image = new Image();
					             image.src = replaceSrc;
					             image.onload = function () {
					                 //获取图片初始宽高
					                 var width = image.width;
					                 var height = image.height;
					                 //判断图片宽度，再按比例设置宽度和高度的值
					                 if (width > 1024) {
					                     width = 1024;
					                     height = Math.ceil(1024 * (image.height / image.width));
					                 }
					
					                 //将图片重新画入canvas中
					                 var canvas = document.getElementById("compressCanvas");
					                 var context = canvas.getContext("2d");
					                 canvas.width = width;
					                 canvas.height = height;
					                 context.beginPath();
					                 context.fillStyle = "#ffffff";
					                 context.fillRect(0, 0, width, height);
					                 context.fill();
					                 context.closePath();
					                 context.drawImage(image, 0, 0, width, height);
					                 replaceSrc = canvas.toDataURL("image/jpeg"); //canvas转DataURL(base64格式)
					
					                 //将压缩后的路径 追加到临时路径数组中
					                 var totalList = [];
					                 if (currentImgTempArray.length > 0) {
					                     totalList = currentImgTempArray.concat(replaceSrc);
					                 } else {
					                     totalList[0] = replaceSrc;
					                 }
	
									 if(type==1){
									 	that.firstImgTempList=totalList
									 }else if(type==2){
									 	that.secondImgTempList=totalList
									 }else if(type==3){
									 	that.thirdImgTempList=totalList
									 }else if(type==4){
									 	that.fourImgTempList=totalList
									 }else if(type==5){
										that.fiveImgTempList=totalList
									 }
					                 that.onUploadImg(totalList,type)
					                 //console.log(that.imgTempList)
					             };
					         };
					
					     },
					     onUploadImg: function (totalList,type) {
					         var that = this;
					         console.log(totalList)
					         if (totalList.length > 0) {
					
					             that.isUploading = true; //正在上传 显示遮罩层 防止连续点击
					
					             var countNum = 0; //计算数量用的 判断上传到第几张图片了
					
					             //map循环遍历上传图片
					             totalList.map(function (imgItem, imgIndex) {
					                 var files = that.dataURLtoFile(imgItem, 'pj' + Date.now() + '.jpg'); //DataURL转File
									 that.qiniuData.key=files.name;
					                 var formData = new FormData();
					                 formData.append('token',that.qiniuData.token)
					                 formData.append('key',that.qiniuData.key)//key为名称
					                 formData.append('file',files)
												    // formData.token=that.qiniuData.token;
												    //
													// formData.append("k1", "v1")							
													// formData.get("k1"); // "v1"
					                 console.log(formData)
					                 $.ajax({
					                 	type: 'POST',
										url: 'http://upload.qiniup.com',
										contentType: false,
										data: formData,
										processData: false,
										async :false,//设置格式为同步非异步 不然可能会报错无法存储到临时变量/对象
										dataType:'json',
										success: function (r) {
											console.log(r);
											that.firstImgUrlList.push(that.upload_qiniu_addr +"/"+r.key);
											if(type==1){
												that.firstImgUrlList.push(that.upload_qiniu_addr +"/"+r.key);
											}else if(type==2){
												that.secondImgUrlList.push(that.upload_qiniu_addr +"/"+r.key);
											}else if(type==3){
												that.thirdImgUrlList.push(that.upload_qiniu_addr +"/"+r.key);
											}else if(type==4){
												that.fourImgUrlList.push(that.upload_qiniu_addr +"/"+r.key);
											}else if(type==5){
												that.fiveImgUrlList.push(that.upload_qiniu_addr +"/"+r.key);
											}
										},
										error: function (r) {
											console.log(r);
										}
					                 })
					             });
					         }
					     },
										
					     //删除某张图片
					     deleteImg: function (idx,imageList) {
					         var that = this;
					         imageList.splice(idx, 1);
					     },
									             /**
					      * 将base64转换为文件
					      * @dataUrl base64路径地址
					      * @fileName 自定义文件名字
					      * */
					     dataURLtoFile: function (dataUrl, fileName) {
					         var arr = dataUrl.split(','), mime = arr[0].match(/:(.*?);/)[1],
					             bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
					         while (n--) {
					             u8arr[n] = bstr.charCodeAt(n);
					         }
					         return new File([u8arr], fileName, {type: mime});
					     },
				}
			})
		</script>

	</body>
</html>
